<!--头部-->
{include file="public/header" /}
    <div class="layui-body" style="background-color: #faf9f4;">
        <!--tab标签-->
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">用户统计</li>
            </ul>
            <p style="color: #3d3d3d;font-size: 20px;text-align: center;padding: 100px 0 10px 0;">用户性别统计图</p>
            <div id="ring" style="width:450px;height:164px;margin: 0 auto;"></div>

            <p style="color: #3d3d3d;font-size: 20px;text-align: center;padding: 100px 0 10px 0;">全国用户每月消费金额统计图</p>
            <div class="layui-form" style="width: 20%;margin-left: 950px;">
                    请选择年月:<input type="text" id="test1"  style="height: 38px;line-height: 38px;border: 1px solid #e6e6e6; background-color: #fff;border-radius: 2px;"> <a href="javascript:;" onclick="a()"><img style="width: 30px;height: 30px;" src="__ROOT__/admin/images/sousuo.png"></a>
            </div>
            <script src="__ROOT__/admin/layDate/layDate-v5.0.2/laydate/laydate.js"></script>
            <script>
                laydate.render({
                    elem: '#test1'
                    ,type: 'month'
                });
            </script>
            <div id="line" style="width:822px;height:492px;margin: 0 auto;"></div>
            <div class="null"></div>
        </div>
    </div>
    <!--底部-->
{include file="public/footer"/}
<script type="text/javascript" src="__ROOT__/admin/js/chart/jquery-1.7.2-min.js.js"></script>
<script type="text/javascript" src="__ROOT__/admin/js/chart/echarts.min.js"></script>

<script>
    //选择时间
    function a(){
        debugger;
        var times = document.getElementById("test1").value;
        $.ajax({
            type: "POST",
            url: "{:url('Chart/select')}",
            data: 'times='+times,
            dataType: "json",
            success: function (data) {
                var rss2 = []
                for ( var i in data ) {
                    rss2.push( data[i] );
                }
                initTotal( rss2 );
            },error: function(err){
                alert("没有数据");
            }

        })

    }

    // JavaScript Document
    // echarts
    // create for AgnesXu at 20161115
    var rss = [];
    {volist name="rss" id="r"}
        rss.push({$r});
    {/volist}
    $(function(){
        initTotal( rss );
    })
    //环状图
    var ring = echarts.init(document.getElementById('ring'));
    var labelTop = {
        normal : {
            label : {
                show : true,
                position : 'center',
                formatter : '{b}',
                textStyle: {
                    baseline : 'bottom'
                }
            },
            labelLine : {
                show : false
            }
        }
    };
    var labelFromatter = {
        normal : {
            label : {
                formatter : function (params){
                    return 100 - params.value + '%'
                },
                textStyle: {
                    baseline : 'top'
                }
            }
        },
    }
    var labelBottom = {
        normal : {
            color: '#ccc',
            label : {
                show : true,
                position : 'center'
            },
            labelLine : {
                show : false
            }
        },
        emphasis: {
            color: 'rgba(0,0,0,0)'
        }
    };
    var radius = [40, 55];
    ring.setOption({
        color:["#4cbbe6","pink","#33bb9f"],
        series : [
            {
                type : 'pie',
                center : ['15%', '58%'],
                radius : radius,
                x: '0%', // for funnel
                itemStyle : labelFromatter,
                data : [
                    {name:'other', value:"{$nv}", itemStyle : labelBottom},
                    {name:'男', value:"{$nan}",itemStyle : labelTop}
                ]
            },
            {
                type : 'pie',
                center : ['84%', '58%'],
                radius : radius,
                x:'20%', // for funnel
                itemStyle : labelFromatter,
                data : [
                    {name:'other', value:"{$nan}", itemStyle : labelBottom},
                    {name:'女', value:"{$nv}",itemStyle : labelTop}
                ]
            }
        ]
    }) ;
    //折线图
    function initTotal( rss ) {
        var line = echarts.init(document.getElementById('line'));
        line.setOption({
            color:["#32d2c9"],
            title: {
                x: 'left',
                text: '消费金额（元）',
                textStyle: {
                    fontSize: '18',
                    color: '#4c4c4c',
                    fontWeight: 'bolder'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']}
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                axisLabel: {
                    interval:0
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'总消费',
                    type:'line',
                    data: rss,
                    markLine: {data: [{type: 'average', name: '平均消费'}]}
                }
            ]
        }) ;
    }
</script>